{% extends "base.html" %}

{% block title %}
社区讨论 - 城会玩
{% endblock %}

{% block style %}
{{ block.super }}
    <style>
        :root {
            --primary: #FF6B35;
            --gradient-primary: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
            --light: #F8F9FA;
            --dark: #343A40;
            --accent: #E9C46A;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            padding-top: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            font-size: 0.925rem;
        }

        main {
            flex: 1;
        }

        .discussion-header {
            background: linear-gradient(135deg, var(--primary), #1a7c70);
            color: white;
            padding: 1.5rem 0;
            margin-bottom: 1.5rem;
            border-radius: 0 0 20px 20px;
        }

        .sidebar-column {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* 左侧边栏 - 发布表单 */
        .left-sidebar {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(0,0,0,0.05);
        }

        /* 帖子统计卡片样式 */
        .stats-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 1.5rem;
            border: 1px solid rgba(0,0,0,0.05);
            height: 100%;
            min-height: 240px;
            display: flex;
            flex-direction: column;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
            margin-top: 0.5rem;
            flex: 1;
        }

        .stat-item {
            text-align: center;
            padding: 1rem;
            background: rgba(255, 107, 53, 0.05);
            border-radius: 8px;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 70px;
        }

        .stat-item:hover {
            background: rgba(255, 107, 53, 0.1);
            transform: translateY(-2px);
        }

        .stat-number {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary);
            display: block;
            line-height: 1.2;
        }

        .stat-label {
            font-size: 0.8rem;
            color: #666;
            margin-top: 0.2rem;
        }

        /* 活跃用户卡片样式 */
        .active-user-item {
            display: flex;
            align-items: center;
            padding: 0.6rem;
            border-radius: 8px;
            transition: all 0.3s;
            margin-bottom: 0.5rem;
            border: 1px solid #f0f0f0;
        }

        .active-user-item:hover {
            background-color: rgba(255, 107, 53, 0.05);
            transform: translateX(5px);
        }

        .active-user-item:last-child {
            margin-bottom: 0;
        }

        .active-user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-right: 0.75rem;
            background: linear-gradient(135deg, var(--primary), #E55A2B);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1rem;
        }

        .active-user-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .active-user-info {
            flex: 1;
        }

        .active-user-name {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 0.2rem;
            color: #333;
        }

        .active-user-stats {
            font-size: 0.85rem;
            color: #666;
        }

        .active-user-posts {
            color: var(--primary);
            font-weight: 500;
        }

        .discussion-header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .discussion-header-title {
            flex: 1;
            min-width: 250px;
        }

        .discussion-header-title h1 {
            font-weight: 700;
            margin-bottom: 0.25rem;
            font-size: 1.75rem;
        }

        .discussion-header-title p {
            opacity: 0.9;
            margin-bottom: 0;
            font-size: 1rem;
        }

        .filter-header-form {
            flex: 2;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 1.25rem;
        }

        .filter-row {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 150px;
        }

        .filter-group label {
            color: white;
            font-weight: 500;
            margin-bottom: 0.25rem;
            display: block;
            font-size: 0.85rem;
        }

        .filter-control {
            width: 100%;
            padding: 0.5rem 0.6rem;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            transition: all 0.3s;
            font-size: 0.85rem;
        }

        .filter-control:focus {
            outline: none;
            border-color: white;
            background: white;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
        }

        .filter-actions {
            display: flex;
            align-items: flex-end;
            gap: 0.5rem;
        }

        .btn-filter {
            background: white;
            color: var(--primary);
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s;
            white-space: nowrap;
            font-size: 0.85rem;
        }

        .btn-filter:hover {
            background: var(--light);
            transform: translateY(-2px);
        }

        /* 讨论卡片样式 - 修改为网格布局，每行4个 */
        .discussion-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(0,0,0,0.05);
            position: relative;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .discussion-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(0,0,0,0.12);
        }

        .discussion-link {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 50px);
            z-index: 1;
            text-decoration: none;
        }

        /* 活动标题区域 - 放在顶部 */
        .discussion-activity-header {
            background: linear-gradient(135deg, var(--primary), #FF8E53);
            color: white;
            padding: 1rem 1.5rem;
            position: relative;
        }

        .discussion-activity-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin: 0;
            display: flex;
            align-items: center;
        }

        .discussion-activity-title i {
            margin-right: 0.5rem;
            font-size: 1rem;
        }

        /* 内容区域重新布局 */
        .discussion-content-wrapper {
            padding: 1.5rem;
            display: flex;
            gap: 1rem;
            flex: 1;
        }

        /* 用户头像区域 */
        .discussion-user-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 80px;
        }

        .user-avatar-large {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .user-avatar-large img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-info-compact {
            text-align: center;
        }

        .username-compact {
            font-weight: 600;
            font-size: 0.9rem;
            color: #333;
            margin-bottom: 0.2rem;
        }

        .post-time-compact {
            color: #666;
            font-size: 0.8rem;
        }

        /* 帖子内容区域 */
        .discussion-content-section {
            flex: 1;
        }

        .discussion-text {
            line-height: 1.6;
            color: #555;
            margin-bottom: 1rem;
            font-size: 0.95rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 4.8rem;
        }

        .discussion-images {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 0.75rem;
        }

        .discussion-image {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .discussion-image:hover {
            transform: scale(1.05);
        }

        .discussion-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 操作按钮区域 */
        .discussion-actions {
            display: flex;
            align-items: center;
            padding: 1rem 1.5rem;
            border-top: 1px solid #f0f0f0;
            background: #fafafa;
            position: relative;
            z-index: 3;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.4rem 0.8rem;
            border: none;
            background: none;
            color: #666;
            border-radius: 16px;
            transition: all 0.3s;
            cursor: pointer;
            font-size: 0.85rem;
            position: relative;
            z-index: 4;
        }

        .action-btn:hover {
            background: rgba(0,0,0,0.05);
            color: #333;
        }

        .action-btn.liked {
            color: #e74c3c;
        }

        .action-btn i {
            font-size: 1rem;
        }

        /* 发布讨论表单 */
        .create-discussion-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin-bottom: 1.5rem;
            border: 1px solid rgba(0,0,0,0.05);
            overflow: hidden;
            width: 100%;
        }

        .create-discussion-header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--primary);
            padding: 1.5rem;
        }

        .create-discussion-header h3 {
            margin: 0;
            font-weight: 600;
            font-size: 1.3rem;
        }

        .create-discussion-body {
            padding: 1.5rem;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #333;
            font-size: 1rem;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 0.75rem;
            font-size: 1rem;
            transition: all 0.3s;
            width: 100%;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
            outline: none;
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), #E55A2B);
            border: none;
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: white;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
            background: linear-gradient(135deg, #FF6B35, #D4491F);
        }

        .btn-outline-secondary {
            border: 2px solid #6c757d;
            color: #6c757d;
            background: transparent;
        }

        .btn-outline-secondary:hover {
            background: #6c757d;
            color: white;
        }

        /* 活动选择轮播样式 */
        .activity-select-container {
            margin-bottom: 1.5rem;
        }

        .activity-select-label {
            font-weight: 500;
            margin-bottom: 1rem;
            color: #333;
            font-size: 1.1rem;
        }

        .activity-carousel-container {
            position: relative;
            margin-bottom: 1rem;
        }

        /* 活动轮播 - 隐藏滚动条 */
        .activity-carousel {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            gap: 1rem;
            padding: 0.5rem 0;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .activity-carousel::-webkit-scrollbar {
            display: none;
        }

        .activity-carousel-card {
            flex: 0 0 300px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 15px rgba(0,0,0,0.08);
            transition: all 0.3s;
            border: 2px solid transparent;
            cursor: pointer;
            position: relative;
        }

        .activity-carousel-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.12);
        }

        .activity-carousel-card.selected {
            border-color: var(--primary);
            box-shadow: 0 3px 15px rgba(255, 107, 53, 0.3);
        }

        .activity-carousel-image {
            height: 120px;
            background-color: #eee;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .activity-carousel-category {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: var(--primary);
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .activity-carousel-status {
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
        }

        .activity-carousel-body {
            padding: 1rem;
        }

        .activity-carousel-title {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: #333;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }

        .activity-carousel-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 0.5rem;
        }

        .activity-carousel-location {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
            color: #666;
            font-size: 0.85rem;
        }

        .activity-carousel-participants {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.75rem;
        }

        .activity-carousel-progress {
            height: 6px;
            flex-grow: 1;
            margin-right: 8px;
            border-radius: 3px;
            background-color: #e9ecef;
        }

        .activity-carousel-progress-bar {
            border-radius: 3px;
            background-color: var(--primary);
        }

        .activity-carousel-count {
            font-size: 0.8rem;
            color: #666;
            white-space: nowrap;
            font-weight: 500;
        }

        .activity-carousel-check {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .activity-carousel-card.selected .activity-carousel-check {
            opacity: 1;
        }

        .activity-carousel-check i {
            color: var(--primary);
            font-size: 0.8rem;
        }

        /* 轮播导航按钮 */
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: white;
            border: none;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s;
        }

        .carousel-nav:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-nav.prev {
            left: -20px;
        }

        .carousel-nav.next {
            right: -20px;
        }

        .carousel-nav:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: translateY(-50%);
        }

        .carousel-nav:disabled:hover {
            background: white;
            color: inherit;
            transform: translateY(-50%);
        }

        /* 侧边栏样式 - 放大版本 */
        .sidebar-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 2rem;
            border: 1px solid rgba(0,0,0,0.05);
            transition: all 0.3s;
            height: 100%;
            min-height: 280px;
            max-height: 350px;
            display: flex;
            flex-direction: column;
        }

        .sidebar-title {
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            padding-bottom: 0.6rem;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
        }

        .sidebar-title i {
            font-size: 1.1rem;
            margin-right: 1rem;
        }

        .popular-discussion-item {
            display: flex;
            margin-bottom: 0.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid #f0f0f0;
            transition: transform 0.2s;
        }

        .popular-discussion-item:hover {
            transform: translateX(5px);
        }

        .popular-discussion-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .popular-discussion-content {
            flex: 1;
        }

        .popular-discussion-text {
            font-weight: 500;
            font-size: 0.9rem;
            margin-bottom: 0.4rem;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .popular-discussion-meta {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.8rem;
            color: #666;
        }

        .popular-discussion-stats {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        /* 重点：为热门话题和活跃用户添加垂直滚动条 */
        .popular-discussions-container,
        .active-users-container {
            max-height: 160px;
            overflow-y: auto;
            padding-right: 8px;
            flex: 1;
        }

        /* 垂直滚动条样式 */
        .popular-discussions-container::-webkit-scrollbar,
        .active-users-container::-webkit-scrollbar {
            width: 4px;
        }

        .popular-discussions-container::-webkit-scrollbar-track,
        .active-users-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 2px;
        }

        .popular-discussions-container::-webkit-scrollbar-thumb,
        .active-users-container::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 2px;
        }

        .popular-discussions-container::-webkit-scrollbar-thumb:hover,
        .active-users-container::-webkit-scrollbar-thumb:hover {
            background: #E55A2B;
        }

        /* 左侧分类导航样式 */
        .category-nav {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 1.5rem;
            border: 1px solid rgba(0,0,0,0.05);
            grid-column: 1 / -1;
            aspect-ratio: 1/0.8;
            min-height: 240px;
        }

        .category-nav-title {
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.9rem;
            font-size: 1.15rem;
            border-bottom: 2px solid var(--primary);
            padding-bottom: 0.5rem;
        }

        .category-section {
            margin-bottom: 1.1rem;
        }

        .category-section:last-child {
            margin-bottom: 0;
        }

        .category-section-title {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 0.7rem;
            font-size: 1rem;
            display: flex;
            align-items: center;
        }

        .category-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .category-item {
            margin-bottom: 0.5rem;
        }

        .category-item:last-child {
            margin-bottom: 0;
        }

        .category-link {
            display: block;
            padding: 0.6rem 1rem;
            color: #555;
            text-decoration: none;
            border-radius: 6px;
            transition: all 0.3s;
            font-size: 0.95rem;
        }

        .category-link:hover {
            background-color: rgba(255, 107, 53, 0.1);
            color: var(--primary);
            transform: translateX(5px);
        }

        .category-link.active {
            background-color: var(--primary);
            color: white;
        }

        .view-all-link {
            display: inline-block;
            margin-top: 0.9rem;
            padding: 0.5rem 1rem;
            background-color: rgba(255, 107, 53, 0.1);
            color: var(--primary);
            text-decoration: none;
            border-radius: 6px;
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .view-all-link:hover {
            background-color: var(--primary);
            color: white;
        }

        /* 分页样式 */
        .pagination {
            justify-content: center;
            margin-top: 1.5rem;
        }

        .page-link {
            color: var(--primary);
            border: 1px solid #dee2e6;
            padding: 0.4rem 0.6rem;
            font-size: 0.85rem;
        }

        .page-item.active .page-link {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .empty-state {
            text-align: center;
            padding: 2rem 1rem;
            color: #666;
        }

        .empty-state i {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 0.75rem;
        }

        .section-title {
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1rem;
            position: relative;
            padding-bottom: 0.4rem;
            font-size: 1.1rem;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: var(--primary);
            border-radius: 2px;
        }

        .action-btn.favorited {
            color: #FFD700;
        }

        .action-btn.shared {
            color: #28a745;
        }

        .delete-btn {
            color: #dc3545;
        }

        .delete-btn:hover {
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }

        /* 消息提示样式 */
        .alert-container {
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: 1050;
            min-width: 280px;
        }

        /* 右侧边栏粘性定位 */
        .sidebar-sticky {
            position: sticky;
            top: 20px;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* 卡片悬停效果增强 */
        .sidebar-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        }

        /* 快速入口按钮调整 */
        .d-grid.gap-2 {
            display: grid !important;
            grid-template-columns: 1fr;
            gap: 0.6rem !important;
            flex: 1;
        }

        .d-grid.gap-2 .btn {
            padding: 0.8rem 1rem;
            font-size: 1rem;
            border-radius: 8px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 55px;
        }

        /* 社区指南列表调整 */
        .sidebar-card ul.list-unstyled {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .sidebar-card ul.list-unstyled li {
            margin-bottom: 0.7rem;
            font-size: 0.9rem;
            display: flex;
            align-items: flex-start;
        }

        .sidebar-card ul.list-unstyled li:last-child {
            margin-bottom: 0;
        }

        .sidebar-card ul.list-unstyled li i {
            margin-top: 0.15rem;
            flex-shrink: 0;
            font-size: 0.95rem;
        }

        /* 右侧边栏网格布局 - 正方形风格 - 放大版本 */
        .right-sidebar-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .right-sidebar-grid .sidebar-card {
            margin-bottom: 0;
            aspect-ratio: 1/1;
            min-height: 280px;
            max-height: 350px;
        }

        /* 帖子网格布局 - 新增样式 */
        .discussions-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        /* 响应式调整 */
        @media (max-width: 1199px) {
            .discussions-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .right-sidebar-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .category-nav {
                grid-column: 1;
                aspect-ratio: unset;
                min-height: auto;
            }

            .sidebar-card {
                aspect-ratio: unset;
                min-height: 240px;
                max-height: 300px;
            }
        }

        @media (max-width: 992px) {
            .discussions-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .sidebar-sticky {
                position: static;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1.25rem;
            }

            .stats-card,
            .category-nav {
                grid-column: 1 / -1;
            }

            .discussion-header-content {
                flex-direction: column;
            }

            .discussion-header-title, .filter-header-form {
                width: 100%;
            }

            .activity-carousel-card {
                flex: 0 0 260px;
            }

            .sidebar-column {
                gap: 1rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .sidebar-card {
                min-height: 240px;
                max-height: 280px;
            }
        }

        @media (max-width: 768px) {
            .discussions-grid {
                grid-template-columns: 1fr;
            }

            .right-sidebar-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .sidebar-card {
                min-height: 220px;
                max-height: 260px;
                padding: 1.5rem;
            }

            .stats-grid {
                gap: 0.5rem;
            }

            .stat-item {
                padding: 0.8rem;
                min-height: 75px;
            }

            .stat-number {
                font-size: 1.2rem;
            }

            .discussion-header {
                padding: 1.25rem 0;
            }

            .discussion-header-title h1 {
                font-size: 1.4rem;
            }

            .filter-row {
                flex-direction: column;
            }

            .filter-group {
                min-width: 100%;
            }

            .discussion-images {
                justify-content: center;
            }

            .discussion-image {
                width: 80px;
                height: 80px;
            }

            .activity-carousel-card {
                flex: 0 0 240px;
            }

            .carousel-nav {
                display: none;
            }

            .alert-container {
                top: 70px;
                right: 10px;
                left: 10px;
            }

            /* 移动端帖子卡片布局调整 */
            .discussion-content-wrapper {
                flex-direction: column;
                gap: 1rem;
            }

            .discussion-user-section {
                flex-direction: row;
                align-items: center;
                min-width: auto;
            }

            .user-avatar-large {
                margin-bottom: 0;
                margin-right: 1rem;
            }

            .user-info-compact {
                text-align: left;
            }
        }

        @media (max-width: 576px) {
            .discussions-grid {
                grid-template-columns: 1fr;
            }

            .right-sidebar-grid {
                grid-template-columns: 1fr;
            }

            .sidebar-card {
                min-height: 200px;
                max-height: none;
            }

            .activity-carousel-card {
                flex: 0 0 220px;
            }
        }

        /* 右侧边栏两列布局优化 */
        .sidebar-column .row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin: 0;
        }

        .sidebar-column .col-md-6 {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            padding: 0;
            flex: 0 0 calc(50% - 0.75rem);
        }

        /* 确保所有卡片高度一致 */
        .sidebar-card {
            min-height: 280px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .sidebar-card .stats-grid,
        .sidebar-card .popular-discussions-container,
        .sidebar-card .active-users-container,
        .sidebar-card .d-grid.gap-2,
        .sidebar-card ul.list-unstyled {
            flex: 1;
        }

        /* 在小屏幕上恢复单列 */
        @media (max-width: 767px) {
            .sidebar-column .col-md-6 {
                flex: 0 0 100%;
            }
        }
    </style>

{% endblock %}

{% block content %}
{% include "nav.html" %}
     <main>
        <!-- 消息提示容器 -->
        <div class="alert-container">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        <i class="fas
                            {% if message.tags == 'success' %}fa-check-circle
                            {% elif message.tags == 'error' %}fa-exclamation-circle
                            {% else %}fa-info-circle{% endif %} me-2"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        </div>

        <!-- 社区头部 -->
        <div class="discussion-header">
            <div class="container">
                <div class="discussion-header-content">
                    <div class="discussion-header-title">
                        <h1>社区交流</h1>
                        <p>分享活动体验，交流心得，结识更多志同道合的朋友</p>
                    </div>

                    <div class="filter-header-form">
                        <form method="get" action="{% url 'social' %}">
                            <div class="filter-row">
                                <!-- 搜索框 -->
                                <div class="filter-group">
                                    <label for="searchInput">搜索活动</label>
                                    <input type="text" class="filter-control" id="searchInput" name="search"
                                           placeholder="输入关键词..." value="{{ search_query }}">
                                </div>

                                <!-- 筛选按钮 -->
                                <div class="filter-actions">
                                    <button class="btn-filter" type="submit">
                                        <i class="fas fa-filter me-1"></i> 筛选
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

         <div class="container">
            <div class="row">
                <!-- 左侧边栏 - 发布表单 -->
                <div class="col-lg-7">
                    <div class="left-sidebar">
                        {% if user.is_authenticated %}
                        <!-- 发布讨论表单 -->
                        <div class="create-discussion-card" id="create-discussion">
                            <div class="create-discussion-header">
                                <h2><i class="fas fa-edit me-2"></i>发布话题</h2>
                            </div>
                            <div class="create-discussion-body">
                                <form method="post" action="{% url 'create_discussion' %}" enctype="multipart/form-data" id="discussion-form">
                                    {% csrf_token %}

                                    <!-- 活动选择部分 - 轮播样式 -->
                                    <div class="activity-select-container">
                                        <div class="activity-select-label">
                                            选择活动 <span class="text-danger">*</span>
                                            <small class="text-muted ms-2">滑动浏览并选择要讨论的活动</small>
                                        </div>

                                        {% if all_activities %}
                                        <div class="activity-carousel-container">
                                            <button class="carousel-nav prev" type="button" disabled>
                                                <i class="fas fa-chevron-left"></i>
                                            </button>

                                            <div class="activity-carousel" id="activity-carousel">
                                                {% for activity in all_activities %}
                                                <div class="activity-carousel-card" data-activity-id="{{ activity.id }}">
                                                    <div class="activity-carousel-image" style="background-image: url('{{ activity.image.url }}')">
                                                        <span class="activity-carousel-category">{{ activity.category.name }}</span>
                                                        <span class="activity-carousel-status {% if activity.is_full %}activity-full{% endif %}">
                                                            {% if activity.is_full %}已满员{% else %}可报名{% endif %}
                                                        </span>
                                                        <div class="activity-carousel-check">
                                                            <i class="fas fa-check"></i>
                                                        </div>
                                                    </div>
                                                    <div class="activity-carousel-body">
                                                        <h5 class="activity-carousel-title">{{ activity.title }}</h5>
                                                        <div class="activity-carousel-meta">
                                                            <span><i class="far fa-calendar me-1"></i> {{ activity.start_time|date:"m月d日" }}</span>
                                                            <span><i class="far fa-clock me-1"></i> {{ activity.start_time|time:"H:i" }}</span>
                                                        </div>
                                                        <div class="activity-carousel-location">
                                                            <i class="fas fa-map-marker-alt me-1"></i> {{ activity.location_name }}
                                                        </div>
                                                        <div class="activity-carousel-participants">
                                                            <div class="activity-carousel-progress">
                                                                {% widthratio activity.current_participants activity.max_participants 100 as percentage %}
                                                                <div class="activity-carousel-progress-bar" style="width: {{ percentage }}%"></div>
                                                            </div>
                                                            <div class="activity-carousel-count">{{ activity.current_participants }}/{{ activity.max_participants }}人</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>

                                            <button class="carousel-nav next" type="button">
                                                <i class="fas fa-chevron-right"></i>
                                            </button>
                                        </div>
                                        {% else %}
                                        <div class="empty-state">
                                            <i class="fas fa-calendar-times"></i>
                                            <h4>暂无活动</h4>
                                            <p>当前没有可用的活动</p>
                                            <a href="{% url 'create_activity' %}" class="btn btn-primary">创建活动</a>
                                        </div>
                                        {% endif %}

                                        <!-- 隐藏的活动ID输入框 -->
                                        <input type="hidden" name="activity" id="selected-activity" required>
                                        <div class="text-danger small mt-1" id="activity-error" style="display: none;">
                                            <i class="fas fa-exclamation-circle me-1"></i>请选择一个活动
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">活动内容 <span class="text-danger">*</span></label>
                                        <textarea class="form-control" name="content" id="content-input"
                                                  placeholder="分享你的活动体验、心得感想或提出问题..."
                                                  required maxlength="1000"></textarea>
                                        <small class="text-muted"><span id="char-count">0</span>/1000 字符</small>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">上传图片</label>
                                        <input type="file" class="form-control" name="images" multiple accept="image/*" id="image-upload">
                                        <small class="text-muted">可选，最多上传5张图片，每张不超过5MB</small>
                                        <div id="image-preview" class="mt-2"></div>
                                    </div>

                                    <button type="submit" class="btn-primary" id="submit-btn">
                                        <i class="fas fa-paper-plane me-2"></i>发布话题
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary ms-2" id="reset-btn">
                                        <i class="fas fa-redo me-2"></i>重置
                                    </button>
                                </form>
                            </div>
                        </div>
                        {% else %}
                        <!-- 未登录提示 -->
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            请<a href="{% url 'login' %}" class="alert-link">登录</a>后参与社区讨论
                        </div>
                        {% endif %}
                    </div>
                </div>

               <!-- 右侧边栏 - 其他组件 -->
                <div class="col-lg-5">
                    <div class="sidebar-column">
                        <div class="row">
                            <!-- 左列 -->
                            <div class="col-md-6">
                                <!-- 热门话题 -->
                                <div class="sidebar-card">
                                    <h5 class="sidebar-title">
                                        <i class="fas fa-fire me-2"></i>热门话题
                                    </h5>
                                    <div class="popular-discussions-container">
                                        {% for discussion in popular_discussions|slice:":3" %}
                                        <div class="popular-discussion-item">
                                            <div class="popular-discussion-content">
                                                <div class="popular-discussion-text">
                                                    <a href="{% url 'discussion_detail' discussion.id %}" class="text-decoration-none text-dark">
                                                        {{ discussion.content|truncatechars:40 }}
                                                    </a>
                                                </div>
                                                <div class="popular-discussion-meta">
                                                    <span class="popular-discussion-stats">
                                                        <i class="fas fa-heart text-danger"></i> {{ discussion.like_count }}
                                                    </span>
                                                    <span class="popular-discussion-stats">
                                                        <i class="fas fa-comment text-primary"></i> {{ discussion.comment_count }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        {% empty %}
                                        <p class="text-muted text-center py-3">暂无热门帖子</p>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- 热门分类 -->
                                <div class="sidebar-card">
                                    <h5 class="sidebar-title">
                                        <i class="fas fa-list me-2"></i>热门分类
                                    </h5>
                                    <!-- 精选 -->
                                    <div class="category-section mb-2">
                                        <ul class="category-list">
                                            <li class="category-item">
                                                <a href="#" class="category-link active">高校精选</a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="category-link">同城活动</a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="category-link">户外运动</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- 活动分类 -->
                                    <div class="category-section">
                                        <h6 class="category-section-title">
                                            <i class="fas fa-th-large me-2"></i>活动分类
                                        </h6>
                                        <ul class="category-list">
                                            {% for category in categories %}
                                            <li class="category-item">
                                                <a href="#" class="category-link" data-category-id="{{ category.id }}">{{ category.name }}</a>
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>

                                <!-- 快速入口 -->
                                <div class="sidebar-card">
                                    <h5 class="sidebar-title">
                                        <i class="fas fa-rocket me-2"></i>快速入口
                                    </h5>
                                    <div class="d-grid gap-2">
                                        <a href="/meet/index/" class="btn btn-outline-info">
                                            <i class="fas fa-home me-2"></i>首页
                                        </a>
                                        <a href="{% url 'active' %}" class="btn btn-outline-primary">
                                            <i class="fas fa-search me-2"></i>发现活动
                                        </a>
                                        <a href="{% url 'create_activity' %}" class="btn btn-outline-success">
                                            <i class="fas fa-plus me-2"></i>创建活动
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- 右列 -->
                            <div class="col-md-6">
                                <!-- 活跃用户 -->
                                <div class="sidebar-card">
                                    <h5 class="sidebar-title">
                                        <i class="fas fa-users me-2"></i>活跃用户
                                    </h5>
                                    <div class="active-users-container">
                                        {% for user in active_users %}
                                        <div class="active-user-item">
                                            <div class="active-user-avatar">
                                                {% if user.avatar %}
                                                    <img src="{{ user.avatar.url }}" alt="{{ user.username }}">
                                                {% else %}
                                                    {{ user.username|first|upper }}
                                                {% endif %}
                                            </div>
                                            <div class="active-user-info">
                                                <div class="active-user-name">{{ user.username }}</div>
                                                <div class="active-user-stats">
                                                    <span class="active-user-posts">{{ user.discussion_count }} 帖子</span>
                                                    <span class="ms-2">{{ user.like_count }} 获赞</span>
                                                </div>
                                            </div>
                                        </div>
                                        {% empty %}
                                        <p class="text-muted text-center py-3">暂无活跃用户数据</p>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- 帖子统计 -->
                                <div class="sidebar-card">
                                    <h5 class="sidebar-title">
                                        <i class="fas fa-chart-bar me-2"></i>帖子统计
                                    </h5>
                                    <div class="stats-grid">
                                        <div class="stat-item">
                                            <span class="stat-number">{{ total_discussions }}</span>
                                            <span class="stat-label">总帖子数</span>
                                        </div>
                                        <div class="stat-item">
                                            <span class="stat-number">{{ today_discussions }}</span>
                                            <span class="stat-label">今日发布</span>
                                        </div>
                                        <div class="stat-item">
                                            <span class="stat-number">{{ total_likes }}</span>
                                            <span class="stat-label">总点赞数</span>
                                        </div>
                                        <div class="stat-item">
                                            <span class="stat-number">{{ total_comments }}</span>
                                            <span class="stat-label">总评论数</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 社区指南 -->
                                <div class="sidebar-card">
                                    <h5 class="sidebar-title">
                                        <i class="fas fa-info-circle me-2"></i>社区指南
                                    </h5>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            尊重他人，友善交流
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            分享真实的活动体验
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            遵守社区规范
                                        </li>
                                        <li class="mb-0">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            积极参与，互帮互助
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 帖子列表部分 - 单独放在下方，每行4个 -->
            <div class="mt-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="section-title mb-0">发布的话题</h4>
                    <span class="text-muted">共 {{ page_obj.paginator.count }} 条话题</span>
                </div>

                {% if page_obj %}
                <div class="discussions-grid">
                    {% for discussion in page_obj %}
                    <div class="discussion-card" id="discussion-{{ discussion.id }}">
                        <!-- 话题链接 -->
                        <a href="{% url 'discussion_detail' discussion.id %}" class="discussion-link"></a>

                        <!-- 活动标题区域 -->
                        <div class="discussion-activity-header">
                            <div class="discussion-activity-title">
                                <i class="fas fa-calendar-alt me-2"></i>
                                {{ discussion.activity.title }}
                            </div>
                        </div>

                        <div class="discussion-content-wrapper">
                            <!-- 用户信息区域 -->
                            <div class="discussion-user-section">
                                <div class="user-avatar-large">
                                    {% if discussion.user.avatar %}
                                        <img src="{{ discussion.user.avatar.url }}" alt="{{ discussion.user.username }}">
                                    {% else %}
                                        {{ discussion.user.username|first|upper }}
                                    {% endif %}
                                </div>
                                <div class="user-info-compact">
                                    <div class="username-compact">{{ discussion.user.username }}</div>
                                    <div class="post-time-compact">
                                        <i class="far fa-clock me-1"></i>
                                        {{ discussion.created_at|date:"m-d H:i" }}
                                    </div>
                                </div>
                            </div>

                            <!-- 内容区域 -->
                            <div class="discussion-content-section">
                                <div class="discussion-text">
                                    {{ discussion.content|linebreaks }}
                                </div>

                                {% if discussion.discussionimage_set.all %}
                                <div class="discussion-images">
                                    {% for image in discussion.discussionimage_set.all|slice:":1" %}
                                    <div class="discussion-image" onclick="openImageModal('{{ image.image.url }}')">
                                        <img src="{{ image.image.url }}" alt="帖子图片" loading="lazy">
                                    </div>
                                    {% endfor %}
                                    {% if discussion.discussionimage_set.all|length > 1 %}
                                    <div class="discussion-image position-relative">
                                        <img src="{{ discussion.discussionimage_set.all.1.image.url }}" alt="帖子图片" loading="lazy">
                                        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50 text-white">
                                            +{{ discussion.discussionimage_set.all|length|add:"-1" }}
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- 操作按钮区域 -->
                        <div class="discussion-actions">
                            <!-- 点赞按钮 -->
                            <button class="action-btn like-btn" data-discussion-id="{{ discussion.id }}">
                                <i class="far fa-heart"></i>
                                <span>{{ discussion.like_count }}</span>
                            </button>

                            <!-- 评论按钮 -->
                            <a href="{% url 'discussion_detail' discussion.id %}" class="action-btn">
                                <i class="far fa-comment"></i>
                                <span>{{ discussion.comment_count }}</span>
                            </a>

                            <!-- 收藏按钮 -->
                            <button class="action-btn favorite-btn" data-discussion-id="{{ discussion.id }}">
                                <i class="far fa-star"></i>
                                <span>{{ discussion.favorites.count }}</span>
                            </button>

                            <!-- 删除按钮（仅发布者可见） -->
                            {% if user.is_authenticated and discussion.user == user %}
                            <button class="action-btn delete-btn ms-auto" data-discussion-id="{{ discussion.id }}">
                                <i class="fas fa-trash"></i>
                            </button>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <i class="fas fa-comments"></i>
                    <h4>暂无帖子</h4>
                    <p>还没有人发布帖子，成为第一个分享的人吧！</p>
                    {% if user.is_authenticated %}
                    <a href="#create-discussion" class="btn btn-primary">发布帖子</a>
                    {% endif %}
                </div>
                {% endif %}

                <!-- 分页 -->
                {% if page_obj.has_other_pages %}
                <nav aria-label="帖子分页">
                    <ul class="pagination">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}

                        {% for i in page_obj.paginator.page_range %}
                            {% if page_obj.number == i %}
                            <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
                            {% else %}
                            <li class="page-item"><a class="page-link" href="?page={{ i }}{% if search_query %}&search={{ search_query }}{% endif %}">{{ i }}</a></li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
        </div>
    </main>

    <script>
        // JavaScript代码保持不变
        document.addEventListener('DOMContentLoaded', function() {
            // 字符计数
            const contentInput = document.getElementById('content-input');
            const charCount = document.getElementById('char-count');

            if (contentInput && charCount) {
                contentInput.addEventListener('input', function() {
                    charCount.textContent = this.value.length;
                });

                // 初始化字符计数
                charCount.textContent = contentInput.value.length;
            }

            // 图片预览
            const imageUpload = document.getElementById('image-upload');
            const imagePreview = document.getElementById('image-preview');

            if (imageUpload && imagePreview) {
                imageUpload.addEventListener('change', function() {
                    imagePreview.innerHTML = '';
                    const files = this.files;

                    for (let i = 0; i < Math.min(files.length, 5); i++) {
                        const file = files[i];
                        if (file.type.startsWith('image/')) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const imgContainer = document.createElement('div');
                                imgContainer.className = 'd-inline-block me-2 mb-2 position-relative';
                                imgContainer.innerHTML = `
                                    <img src="${e.target.result}" alt="预览" class="rounded" style="width: 80px; height: 80px; object-fit: cover;">
                                    <button type="button" class="btn-close position-absolute top-0 end-0" style="background-size: 0.7rem;" onclick="this.parentElement.remove()"></button>
                                `;
                                imagePreview.appendChild(imgContainer);
                            };
                            reader.readAsDataURL(file);
                        }
                    }
                });
            }

            // 重置表单
            const resetBtn = document.getElementById('reset-btn');
            if (resetBtn) {
                resetBtn.addEventListener('click', function() {
                    document.getElementById('discussion-form').reset();
                    if (imagePreview) imagePreview.innerHTML = '';
                    if (charCount) charCount.textContent = '0';

                    // 重置活动选择
                    const selectedCards = document.querySelectorAll('.activity-carousel-card.selected');
                    selectedCards.forEach(card => {
                        card.classList.remove('selected');
                    });
                    document.getElementById('selected-activity').value = '';
                    document.getElementById('activity-error').style.display = 'none';
                });
            }

            // 自动隐藏消息提示
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }, 5000);
            });

            // 轮播功能
            const carousel = document.getElementById('activity-carousel');
            const prevBtn = document.querySelector('.carousel-nav.prev');
            const nextBtn = document.querySelector('.carousel-nav.next');

            if (carousel && prevBtn && nextBtn) {
                const cardWidth = 300; // 卡片宽度 + gap
                const scrollAmount = cardWidth * 2; // 每次滚动2张卡片

                // 更新导航按钮状态
                function updateNavButtons() {
                    prevBtn.disabled = carousel.scrollLeft <= 0;
                    nextBtn.disabled = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth;
                }

                // 上一张
                prevBtn.addEventListener('click', function() {
                    carousel.scrollBy({
                        left: -scrollAmount,
                        behavior: 'smooth'
                    });
                });

                // 下一张
                nextBtn.addEventListener('click', function() {
                    carousel.scrollBy({
                        left: scrollAmount,
                        behavior: 'smooth'
                    });
                });

                // 监听滚动事件更新按钮状态
                carousel.addEventListener('scroll', updateNavButtons);

                // 初始化按钮状态
                updateNavButtons();
            }

            // 活动选择功能
            const activityCards = document.querySelectorAll('.activity-carousel-card');
            const selectedActivityInput = document.getElementById('selected-activity');
            const activityError = document.getElementById('activity-error');

            activityCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 移除所有卡片的选中状态
                    activityCards.forEach(c => c.classList.remove('selected'));

                    // 设置当前卡片为选中状态
                    this.classList.add('selected');

                    // 设置选中的活动ID
                    const activityId = this.getAttribute('data-activity-id');
                    selectedActivityInput.value = activityId;

                    // 隐藏错误提示
                    activityError.style.display = 'none';
                });
            });

            // 表单提交验证
            const discussionForm = document.getElementById('discussion-form');
            if (discussionForm) {
                discussionForm.addEventListener('submit', function(e) {
                    if (!selectedActivityInput.value) {
                        e.preventDefault();
                        activityError.style.display = 'block';

                        // 滚动到错误位置
                        activityError.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }
                });
            }

            // 点赞功能
            document.querySelectorAll('.like-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if (!{{ user.is_authenticated|yesno:"true,false" }}) {
                        alert('请先登录');
                        return;
                    }

                    const discussionId = this.getAttribute('data-discussion-id');
                    if (!discussionId) return;

                    const icon = this.querySelector('i');
                    const countSpan = this.querySelector('span');

                    fetch(`/meet/social/discussion/${discussionId}/like/`, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}',
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `csrfmiddlewaretoken={{ csrf_token }}`
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            if (data.liked) {
                                icon.classList.remove('far');
                                icon.classList.add('fas');
                                this.classList.add('liked');
                            } else {
                                icon.classList.remove('fas');
                                icon.classList.add('far');
                                this.classList.remove('liked');
                            }
                            countSpan.textContent = data.like_count;
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                });
            });

            // 收藏功能 - 简化版本
            document.querySelectorAll('.favorite-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if (!{{ user.is_authenticated|yesno:"true,false" }}) {
                        alert('请先登录');
                        return;
                    }

                    const discussionId = this.getAttribute('data-discussion-id');
                    if (!discussionId) return;

                    const icon = this.querySelector('i');
                    const countSpan = this.querySelector('span');

                    fetch(`/meet/social/discussion/${discussionId}/favorite/`, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}',
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `csrfmiddlewaretoken={{ csrf_token }}`
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            if (data.favorited) {
                                icon.classList.remove('far');
                                icon.classList.add('fas');
                                this.classList.add('favorited');
                            } else {
                                icon.classList.remove('fas');
                                icon.classList.add('far');
                                this.classList.remove('favorited');
                            }
                            countSpan.textContent = data.favorite_count;
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                });
            });

            // 转发功能
            document.querySelectorAll('.share-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if (!{{ user.is_authenticated|yesno:"true,false" }}) {
                        alert('请先登录');
                        return;
                    }

                    const discussionId = this.getAttribute('data-discussion-id');
                    if (!discussionId) return;

                    const countSpan = this.querySelector('span');

                    fetch(`/meet/social/discussion/${discussionId}/share/`, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}',
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `csrfmiddlewaretoken={{ csrf_token }}`
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            countSpan.textContent = data.shares_count;
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                });
            });

            // 删除功能
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    const discussionId = this.getAttribute('data-discussion-id');
                    if (!discussionId) return;

                    if (confirm('确定要删除这条帖子吗？此操作不可恢复。')) {
                        fetch(`/meet/social/discussion/${discussionId}/delete/`, {
                            method: 'POST',
                            headers: {
                                'X-CSRFToken': '{{ csrf_token }}',
                                'Content-Type': 'application/x-www-form-urlencoded',
                            },
                            body: `csrfmiddlewaretoken={{ csrf_token }}`
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                const discussionCard = document.getElementById(`discussion-${discussionId}`);
                                if (discussionCard) {
                                    discussionCard.remove();
                                }
                            } else {
                                alert(data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('删除失败，请重试');
                        });
                    }
                });
            });

            // 帖子卡片点击事件
            document.querySelectorAll('.discussion-card').forEach(card => {
                card.addEventListener('click', function(e) {
                    // 如果点击的是操作按钮，则不触发链接跳转
                    if (e.target.closest('.action-btn')) {
                        return;
                    }

                    const link = this.querySelector('.discussion-link');
                    if (link) {
                        window.location.href = link.href;
                    }
                });
            });
        });

        // 自动提交表单的筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            // 分类筛选自动提交
            const categorySelect = document.getElementById('categorySelect');
            if (categorySelect) {
                categorySelect.addEventListener('change', function() {
                    this.closest('form').submit();
                });
            }

            // 排序方式自动提交
            const sortSelect = document.getElementById('sortSelect');
            if (sortSelect) {
                sortSelect.addEventListener('change', function() {
                    this.closest('form').submit();
                });
            }

            // 回车键搜索
            const searchInput = document.getElementById('searchInput');
            if (searchInput) {
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        this.closest('form').submit();
                    }
                });
            }
        });
    </script>
{% endblock %}